<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式诊断页面</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/ilovefree-migration.css">
    <link rel="stylesheet" href="assets/css/enhanced-layout.css">
    <link rel="stylesheet" href="assets/css/fontawesome-icons.css">
    <style>
        .diagnostic {
            padding: 20px;
            background: red;
            color: white;
            font-size: 24px;
            margin: 20px 0;
        }
        .test-variable {
            background: var(--ilovefree-blue, #0396FF);
            padding: 10px;
            color: white;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="diagnostic">
        诊断页面 - 如果看到这个红色背景，说明基础CSS加载正常
    

    <div class="test-variable">
        如果看到蓝色背景，说明CSS变量加载正常
        当前值: <span id="variable-value"></span>
    

    <div class="category-header">
        <div class="category-title">
            <div class="category-icon">
            <h2 class="category-name">测试分类标题</h2>
        
        <div class="category-line">
    

    <script>
        // 测试CSS变量
        const rootStyle = getComputedStyle(document.documentElement);
        const ilovefreeBlue = rootStyle.getPropertyValue('--ilovefree-blue');
        document.getElementById('variable-value').textContent = ilovefreeBlue || '未找到变量';

        console.log('CSS变量检查:');
        console.log('--ilovefree-blue:', ilovefreeBlue);
        console.log('--ilovefree-light:', rootStyle.getPropertyValue('--ilovefree-light'));

        // 检查样式文件加载状态
        document.querySelectorAll('link[rel="stylesheet"]').forEach((link, index) => {
            console.log(`样式文件${index + 1}:`, link.href);
        });

        // 测试分类标题样式
        const categoryHeader = document.querySelector('.category-header');
        if (categoryHeader) {
            const headerStyle = getComputedStyle(categoryHeader);
            console.log('分类标题样式:', {
                margin: headerStyle.margin,
                display: headerStyle.display,
                alignItems: headerStyle.alignItems
            });
        }
    </script>
</body>
</html>